.c-body
  //- 加载中
  .loadding(:class="loaddingClass")
    .load-txt 加载数据中...
    .load-ico

  //- 加载失败
  .loaded-fail(:class="loadedFailClass") {{loadedFail}}

  //- 加载成功
  div(:class="loadedSuccClass")

    //- 网页内容
    .c-content

      //- 在线支付内容
      .c-pay

        //- 银行卡绑定
        .c-bind-yhcard(v-if='paySteps==-1')
          //- 购买提示
          .c-pay-tips
            .c-tips-info
              span 购买产品必须先完成银行卡绑定

          //- 银行选择 
          .c-ope-step.c-yhxz
            .c-step-name
              span 1
              span 银行选择

            //- 银行类型
            .pure-g.c-pure
              .pure-u-1-2.pure-u-lg-1-6.pure-u-md-1-5.pure-u-sm-1-4.c-yh-list(v-for="(item,idx) in bankTable" v-bind:class="{'c-yh-selected':selectYhIdx == idx}" @click.stop.prevent="selectYhType(idx)")
                img.pure-img.c-pure-img(:src="'./mods/pay/img/bank_'+(idx+1)+'.png'")

          //- 填写信息
          .c-ope-step.c-txxx
            .c-step-name
              span 2
              span 填写信息
            .c-pay-info
              //- 未签约认证
              .pure-g.c-pure(v-show='!rz_success')
                .pure-u-1-2.c-pure-u
                  span 储蓄卡号：
                .pure-u-1-2.c-pure-u
                  input(type='text' v-model='card_no' placeholder='请输入银行卡号' onkeyup="this.value=this.value.replace(/\\D/g,'').replace(/....(?!$)/g,'$& ')")
                .pure-u-1-2.c-pure-u
                  span 真实姓名：
                .pure-u-1-2.c-pure-u
                  input(type='text' v-model='name' placeholder='真实姓名必须与您的银行卡开户名一致')
                .pure-u-1-2.c-pure-u
                  span 证件类型：
                .pure-u-1-2.c-pure-u
                  span {{userInfo.id_kind_name}}
                .pure-u-1-2.c-pure-u
                  span 证件号码：
                .pure-u-1-2.c-pure-u
                  //- span {{userInfo.id_no}}
                  input(type='text' v-model='userInfo.id_no' placeholder='身份证')
                .pure-u-1-2.c-pure-u
                  span 证件有效期：
                .pure-u-1-2.c-pure-u
                  input(type='date' v-model='card_expire')
                .pure-u-1-2.c-pure-u
                  span 联系地址：
                .pure-u-1-2.c-pure-u
                  input(type='text' v-model='address' placeholder='请输入联系地址')
                .pure-u-1-2.c-pure-u
                  span 职业：
                .pure-u-1-2.c-pure-u
                  input(type='text' v-model='profession' placeholder='请输入职业')
                .pure-u-1-2.c-pure-u
                  span 银行预留手机号：
                .pure-u-1-2.c-pure-u
                  input.c-bind-yh-phone(type='text' v-model='userInfo.phone' placeholder='请输入银行预留手机号')
                  span.c-get-yzm(@click.stop.prevent='getIdentify()') 获取短信验证码
                  //- span.c-get-yzm(@click.stop.prevent='jhDialog()') 获取短信验证码
                //- .pure-u-1-2.c-pure-u
                //-   span 短信验证码：
                //- .pure-u-1-2.c-pure-u
                //-   input(type='text' v-model='identify_val' placeholder='请输入手机验证码')
                //- .pure-u-1-2.c-pure-u
                //-   span
                //- .pure-u-1-2.c-pure-u
                //-   .pure-button.pure-button-primary.c-tjdd-btn.c-disabled-btn(disabled v-if='identifyValIsEmpty') 绑定银行卡
                //-   .pure-button.pure-button-primary.c-tjdd-btn.c-active-btn(@click.stop.prevent='onSubmit2' v-else) 绑定银行卡

                .pure-u-1.c-pure-u(v-if="errorMsg!=''") 
                  span(style='color:red;margin-right:13em;') {{errorMsg}}!
              //- 已签约认证
              .pure-g.c-pure(v-show='rz_success')
                .pure-u-1-2.c-pure-u
                  span 储蓄卡号：
                .pure-u-1-2.c-pure-u
                  span {{order.card_no}}
                .pure-u-1-2.c-pure-u
                  span 真实姓名：
                .pure-u-1-2.c-pure-u
                  span {{order.name}}
                .pure-u-1-2.c-pure-u
                  span 证件类型：
                .pure-u-1-2.c-pure-u
                  span {{userInfo.id_kind_name}}
                .pure-u-1-2.c-pure-u
                  span 证件号码：
                .pure-u-1-2.c-pure-u
                  span {{userInfo.id_no}}
                .pure-u-1-2.c-pure-u
                  span 证件有效期：
                .pure-u-1-2.c-pure-u
                  span {{userInfo.card_expire}}
                .pure-u-1-2.c-pure-u
                  span 联系地址：
                .pure-u-1-2.c-pure-u
                  span {{order.address}}
                .pure-u-1-2.c-pure-u
                  span 职业：
                .pure-u-1-2.c-pure-u
                  span {{order.profession}}
                .pure-u-1-2.c-pure-u
                  span 银行预留手机号：
                .pure-u-1-2.c-pure-u
                  span {{order.mobile}}
                .pure-u-1.c-pure-u
                  .jihuo
                    span 需要激活资金账户,
                    a(href="http://114.242.220.160:8081/BankBusiSvr/fromBankSign.jsp" target="_blank" @click="goActive()") 去激活

              //- .pure-g.c-pure
              //-   .pure-u-1-2.c-pure-u
              //-     span
              //-   .pure-u-1-2.c-pure-u
              //-     .pure-button.pure-button-primary.c-tjdd-btn.c-disabled-btn(v-show='!rz_success' @click.stop.prevent='paySteps=0') 下一步
              //-     .pure-button.pure-button-primary.c-tjdd-btn.c-active-btn(v-show='rz_success' @click.stop.prevent='') 下一步

          //- 验证码弹出框
          c-dialog(:dialogOption="dlgOpt")
            .verifi_dialog2
              .center.content 请输入短信验证码
              form(id='finishForm' name='finishForm' @submit.stop.prevent='payVerification')
                input(type='text' v-model='identify_val' required)
                span(v-show='!error_rz') 短信验证码已发送，请注意查收。
                span.error(v-show='error_rz') {{error_rz}}
                button.x_btn(type='button' v-show='time<=0' @click='paySignContract') 重新获取验证码
                button.zf_btn(v-show='time>0') {{time}}秒后重新获取
                button(type='submit' v-show='!yzm2_loading').gray_btn 确定
                button.button(v-show='yzm2_loading && !error_rz').gray_btn 请稍候

          //- 激活状态弹出框
          c-dialog(:dialogOption="dlgOptLoad")
            .pure-button.pure-button-primary.c-jhsuc-btn(@click.stop.prevent="activeSuc()") 激活成功
            .pure-button.pure-button-primary.c-jhfail-btn 激活失败

        //- div.active-load(v-show="jihuo")
        //-   .mask
        //-   .load

        //- 开通客户号
        .c-open-khh(v-if="paySteps==0")
          //- 购买提示
          .c-pay-tips
            .c-tips-info
              span 购买产品必须先开通客户号
          .c-password
            fieldset
              .c-open-title
                span ——
                h2 账户开通
                span ——
              .c-row
                label 设置交易密码：
                input(type="text" v-model="password" placeholder="请输入交易密码")
                .left.no(v-show="error_password")
                span.error(v-show="error_password") {{error_password}}
              .c-row
                label 确认交易密码：
                input(type="password" v-model="password_two" placeholder="请确认交易密码")
                span.error(v-show="error_password2") {{error_password2}}
                .left(:class="isMatchPsw")
              .c-error(v-show="error_msg") 
                span {{error_msg}}
              button.pure-button.pure-button-primary.c-open-button(@click="queryContract()") 开通

        //-步骤
        .c-pay-step(v-if='paySteps>0')
          .c-order-flow.pure-g
            .c-step.c-step1.pure-u-1-4
              p 协议签订
              span.c-qq(:class="{'c-pre-step':paySteps>1,'c-cur-step':paySteps==1}") 1
              span.c-xt(:class="{'c-cur-step':paySteps>1}")
            .c-step.c-step2.pure-u-1-4
              p 订单确定
              span.c-qq(:class="{'c-pre-step':paySteps>2,'c-cur-step':paySteps==2}") 2
              span.c-xt(:class="{'c-cur-step':paySteps>2}")
            .c-step.c-step3.pure-u-1-4
              p 在线支付
              span.c-qq(:class="{'c-pre-step':paySteps>3,'c-cur-step':paySteps==3}") 3
              span.c-xt(:class="{'c-cur-step':paySteps>3}")
            .c-step.c-step4.pure-u-1-4
              p 购买完成
              span.c-qq(:class="{'c-cur-step':paySteps==4}") 4

        //- 签署协议
        .c-xieyi(v-if='paySteps==1')
          .xieyi
            ul.pure-menu-list
              li.pure-menu-item(v-for="item in xieyiList")
                .title
                  span {{item.econtract_title}}
                  span.span(@click.stop.prevent='item.up_down=!item.up_down' v-bind:class="{'up':!item.up_down,'down':item.up_down}") &nbsp;
                  a.download(v-bind:href="item.econtract_link") 下载该协议
                .content(v-show="item.up_down")
                  div(v-html="item.econtract_text")
          button.pure-button.pure-button-primary.c-xieyi-button(@click.stop.prevent='signXieyi()') 签署协议

        //- 订单确定
        .c-order-confirm(v-if='paySteps==2')
          .c-khxx
            .title
              fieldset
                legend 客户信息
            .content
              label 姓名：
              span 张三
              lebel 手机号码：
              span 123456789
              label 电子邮箱：
              span 123456789@qq.com
          .c-jsqd
            .title
              fieldset
                legend 结算清单
            .content
              table
                thead
                  tr
                    th 产品名称
                    th 风险等级
                    th 购买金额
                tbody
                 tr
                  td 中兵广发定增1号
                  td 高风险
                  td 50000元
          .c-zffs
            .title
              fieldset
                legend 选择支付方式
            .yhkh
              .radio(v-bind:class="{'checked':payMethod==1}" @click="selectPayMethod(1)") 快捷支付
            .qtyh
              .radio(v-bind:class="{'checked':payMethod==0}" @click="selectPayMethod(0)") 使用其他银行卡
            //- 银行选择
            .c-ope-step.c-yhxz(v-show="payMethod==0")
              .c-step-name
                span 1
                span 银行选择

              //- 银行类型
              .pure-g.c-pure
                .pure-u-1-2.pure-u-lg-1-6.pure-u-md-1-5.pure-u-sm-1-4.c-yh-list(v-for="(item,idx) in yhNames" v-bind:class="{'c-yh-selected':selectYhIdx == idx}" @click.stop.prevent="selectYhType(idx)")
                  img.pure-img.c-pure-img(:src="'./mods/pay/img/bank_'+(idx+1)+'.png'")
            //- 填写信息
            .c-ope-step.c-txxx(v-show="payMethod==0")
              .c-step-name
                span 2
                span 填写信息
              .c-pay-info
                //- 未签约认证
                .pure-g.c-pure(v-show='!rz_success')
                  .pure-u-1-2.c-pure-u
                    span 储蓄卡号：
                  .pure-u-1-2.c-pure-u
                    input(type='text' v-model='card_no' placeholder='请输入银行卡号' onkeyup="this.value=this.value.replace(/\\D/g,'').replace(/....(?!$)/g,'$& ')")
                  .pure-u-1-2.c-pure-u
                    span 真实姓名：
                  .pure-u-1-2.c-pure-u
                    input(type='text' v-model='name' placeholder='真实姓名必须与您的银行卡开户名一致')
                  .pure-u-1-2.c-pure-u
                    span 证件类型：
                  .pure-u-1-2.c-pure-u
                    span {{userInfo.id_kind_name}}
                  .pure-u-1-2.c-pure-u
                    span 证件号码：
                  .pure-u-1-2.c-pure-u
                    //- span {{userInfo.id_no}}
                    input(type='text' v-model='userInfo.id_no' placeholder='身份证')
                  .pure-u-1-2.c-pure-u
                    span 证件有效期：
                  .pure-u-1-2.c-pure-u
                    input(type='date' v-model='card_expire')
                  .pure-u-1-2.c-pure-u
                    span 联系地址：
                  .pure-u-1-2.c-pure-u
                    input(type='text' v-model='address' placeholder='请输入联系地址')
                  .pure-u-1-2.c-pure-u
                    span 职业：
                  .pure-u-1-2.c-pure-u
                    input(type='text' v-model='profession' placeholder='请输入职业')
                  .pure-u-1-2.c-pure-u
                    span 银行预留手机号：
                  .pure-u-1-2.c-pure-u
                    input.c-bind-yh-phone(type='text' v-model='userInfo.phone' placeholder='请输入银行预留手机号')
                    span.c-get-yzm(@click.stop.prevent='getIdentify()') 获取短信验证码
                    //- span.c-get-yzm(@click.stop.prevent='yzmDialog()') 获取短信验证码
                  //- .pure-u-1-2.c-pure-u
                  //-   span 短信验证码：
                  //- .pure-u-1-2.c-pure-u
                  //-   input(type='text' v-model='identify_val' placeholder='请输入手机验证码')
                  //- .pure-u-1-2.c-pure-u
                  //-   span
                  //- .pure-u-1-2.c-pure-u
                  //-   .pure-button.pure-button-primary.c-tjdd-btn.c-disabled-btn(disabled v-if='identifyValIsEmpty') 绑定银行卡
                  //-   .pure-button.pure-button-primary.c-tjdd-btn.c-active-btn(@click.stop.prevent='onSubmit2' v-else) 绑定银行卡

                  .pure-u-1.c-pure-u(v-if="errorMsg!=''") 
                    span(style='color:red;margin-right:13em;') {{errorMsg}}!
                //- 已签约认证
                .pure-g.c-pure(v-show='rz_success')
                  .pure-u-1-2.c-pure-u
                    span 储蓄卡号：
                  .pure-u-1-2.c-pure-u
                    span {{order.card_no}}
                  .pure-u-1-2.c-pure-u
                    span 真实姓名：
                  .pure-u-1-2.c-pure-u
                    span {{order.name}}
                  .pure-u-1-2.c-pure-u
                    span 证件类型：
                  .pure-u-1-2.c-pure-u
                    span {{userInfo.id_kind_name}}
                  .pure-u-1-2.c-pure-u
                    span 证件号码：
                  .pure-u-1-2.c-pure-u
                    span {{userInfo.id_no}}
                  .pure-u-1-2.c-pure-u
                    span 证件有效期：
                  .pure-u-1-2.c-pure-u
                    span {{userInfo.card_expire}}
                  .pure-u-1-2.c-pure-u
                    span 联系地址：
                  .pure-u-1-2.c-pure-u
                    span {{order.address}}
                  .pure-u-1-2.c-pure-u
                    span 职业：
                  .pure-u-1-2.c-pure-u
                    span {{order.profession}}
                  .pure-u-1-2.c-pure-u
                    span 银行预留手机号：
                  .pure-u-1-2.c-pure-u
                    span {{order.mobile}}
                  .pure-u-1.c-pure-u
                    span(style="color:red;margin-right:13em") 绑定成功！

                //- .pure-g.c-pure
                //-   .pure-u-1-2.c-pure-u
                //-     span
                //-   .pure-u-1-2.c-pure-u
                //-     .pure-button.pure-button-primary.c-tjdd-btn.c-disabled-btn(v-show='!rz_success' @click.stop.prevent='paySteps=1') 下一步
                //-     .pure-button.pure-button-primary.c-tjdd-btn.c-active-btn(v-show='rz_success' @click.stop.prevent='') 下一步

          button.pure-button.pure-button-primary.c-confirm-button(@click.stop.prevent="nextStep()") 下一步

        //- 在线支付
        .c-order-pay(v-if='paySteps==3')
          .c-pay-tips
            .c-tips-info
              p 订单已提交，请完成支付！
              span 订单编号：
              span 123456789
              span |
              span 支付金额：
              span 50000
              span 元
          .c-jsqd
            .title
              fieldset
                legend 结算清单
            .content
              table
                thead
                  tr
                    th 产品名称
                    th 风险等级
                    th 购买金额
                tbody
                 tr
                  td 中兵广发定增1号
                  td 高风险
                  td 50000元
          .c-zxzf
            .title
              fieldset
                legend 在线支付
            .content
              label 交易密码：
              //- input(v-model="")
          button.pure-button.pure-button-primary.c-pay-button(@click.stop.prevent="pay()") 支付

        //- 购买完成
        .c-order-finish(v-if='paySteps==4')
          .c-pay-success
            .c-gmcg
              span 购买成功
            .c-order-info
              span 订单编号：
              span 554817451123
              span |
              span 支付金额：
              span 500000
              span 元
          .c-order-detail
            table
              thead
                tr
                  th 产品名称
                  th 风险等级
                  th 购买金额
                  th 订单状态
              tbody
                tr
                 td 中兵广发定增1号
                 td 高风险
                 td 50000
                 td 查看订单



          //- button.pure-button.pure-button-primary.c-ckdd-button(@click.stop.prevent='') 查看订单